<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>label</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
	<h2>label完整写法，用for：</h2>
	<form action="#" method="post">
		<div>
			<label for="gender">Gender:</label>
			<input type="radio" name="gender" id="gender" value="1" />
		</div>
	</form>
</div>
<div>
	<h2>label简写，不用for：</h2>
	<form action="#" method="post">
		<div>
			<label>Gender:<input type="radio" name="gender" value="1" /></label>
		</div>
	</form>
</div>
<script type="text/javascript">
var label = document.getElementsByTagName('label');
for(var i=0,l=label.length;i<l;i++)
{
	label[i].onclick = function()
	{
		alert('label onclick');
	}
}
var input = document.getElementsByTagName('input');
for(var i=0,l=input.length;i<l;i++)
{
	if(input[i].type=='radio')
	{
		input[i].onclick = function()
		{
			alert('input onclick');
		}
	}
}
</script>
<p>总结：gte IE7、Firefox、Chrome 支持 label 简写，点击文本选中 radio。IE6 不支持 label 简写，点击文本不选中 radio。
</p>
<p>使用 label 简写，把 label 的文本和 input 连在一起，不利于CSS控制样式。所以一般使用完整写法。
</p>
<p>事件冒泡：label 简写时，点一次 label，会执行 label onclick、input onclick、label onclick（gte IE7、Firefox、Chrome）。
</p>
<p>事件冒泡：label 简写时，点一次 input，会执行 input onclick、label onclick（gte IE6、Firefox、Chrome）。
</p>
<p>label 完整写法时，点一次 label，会执行 label onclick、input onclick（gte IE6、Firefox、Chrome）。
</p>
<p>label 完整写法时，点一次 input，会执行 input onclick（gte IE6、Firefox、Chrome）。
</p>
</body>
</html>